<template>
  <div>
    <!-- 绑定事件 v-on:事件名='methods里的方法' -->
    <button v-on:click="addOne">加一</button>
    <div>
      {{num}}
    </div>
    <button v-on:click="add(5)">加5</button>
    <!-- 绑定事件简写是@ -->
    <button @click="less">减一</button>
  </div>
</template>

<script>
// 是vue项目的入口文件
export default {
  // vue组件的变量都定义在data函数return的对象里
  // data是一个函数 
  // 1.定义变量
 data() {
  //  注意: 要返回一个对象
   return {
      num: 1
   }
 },
 methods: {
   addOne () {
     console.log('点击了', this);
    //  在methods里使用vue的变量  需要用this
    //  this.num = this.num + 1
     this.num++
   },
   add (val) {
     this.num = this.num + val
   },
   less () {
     this.num--
   }
 }
}
</script>

<style>

</style>